<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filters">
        <el-form-item>
          <el-input v-model="filters.keyword" placeholder="关键字"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="getShops">查询</el-button>
        </el-form-item>
        <!--        <el-form-item>
                  <el-button type="primary" @click="handleAdd">新增</el-button>
                </el-form-item>-->
      </el-form>
    </el-col>

    <!--列表-->
    <el-table :data="shops" highlight-current-row v-loading="listLoading"
              @selection-change="selsChange" style="width: 100% ;">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column prop="logo" label="图标" min-width="60" sortable>
        <template slot-scope="scope">
          <img :src="scope.row.logo" width="50px" height="50px">
        </template>
      </el-table-column>
      <el-table-column prop="name" label="店铺名">
      </el-table-column>
      <el-table-column prop="admin.username" label="管理员">
      </el-table-column>
      <el-table-column prop="tel" label="电话">
      </el-table-column>
      <el-table-column prop="registerTime" label="注册时间">
      </el-table-column>

      <el-table-column prop="state" label="状态" width="80" sortable>
        <template slot-scope="scope">
          <span v-if="scope.row.state==1" style="color: hotpink">待审核</span>
          <span v-if="scope.row.state==2" style="color: blue">待激活</span>
          <span v-if="scope.row.state==3" style="color: green">正常使用</span>
          <span v-if="scope.row.state==4" style="color: red">驳回</span>
        </template>
      </el-table-column>

      <el-table-column prop="address" label="地址">
      </el-table-column>
      <el-table-column label="操作" width="250">
        <template slot-scope="scope">
          <el-button size="small" type="" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
          <el-button type="" :disabled="scope.row.state!==1" size="small"
                     @click="handleAudit(scope.$index, scope.row)">店铺审核
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <!--      <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>-->
      <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="pageSize"
                     :total="total" style="float:right;">
      </el-pagination>
    </el-col>


    <!--新增界面-->
    <el-dialog :title="title" :visible.sync="addFormVisible" :close-on-click-modal="false">
      <el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
        <el-form-item label="店铺名称" prop="name">
          <el-input v-model="addForm.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="店铺编号" prop="sn">
          <el-input v-model="addForm.sn" auto-complete="off"></el-input>
        </el-form-item>

        <el-form-item label="店铺经理">
          <el-select v-model="addForm.managerId" @change="$forceUpdate()" placeholder="请选择">
            <el-option
                v-for="item in managers"
                :key="item.id"
                :label="item.username"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上级店铺">
          <el-cascader
              clearable
              v-model="addForm.parentId"
              :options="options"
              :props="{'value':'id','label':'name', checkStrictly: true}"
          ></el-cascader>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="addFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
      </div>
    </el-dialog>
    <!-- 审核模态框 -->
    <el-dialog title="审核店铺" :visible.sync="shopAuditVisible" :close-on-click-modal="false">
      <el-form :model="shopAuditLog" label-width="80px" ref="shopAuditLogForm">
        <el-form-item label="备注" prop="note">
          <el-input type="textarea" v-model="shopAuditLog.note"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="shopAuditVisible = false">取消</el-button>
        <el-button type="primary" @click.native="auditPass">通过</el-button>
        <el-button type="warning" @click.native="auditReject">驳回</el-button>
      </div>
    </el-dialog>
  </section>


</template>

<script>
export default {
  data() {
    return {
      imgPrefix: "http://60.204.187.34:8800",
      filters: {
        keyword: ''
      },
      //店铺分页列表
      shops: [],
      total: 0,
      currentPage: 1,
      pageSize: 10,
      listLoading: false,
      shopAuditVisible: false,
      sels: [],//列表选中列
      managers: [],//店铺经理列表
      title: "",//弹出框标题
      options: [],//店铺列表（无限级树）
      editFormVisible: false,//编辑界面是否显示
      editLoading: false,
      addFormVisible: false,//新增界面是否显示
      addLoading: false,
      addFormRules: {
        name: [
          {required: true, message: '请输入姓名', trigger: 'blur'}
        ],
        sn: [
          {required: true, message: '请输入编号', trigger: 'blur'}
        ]
      },
      //新增界面数据
      addForm: {
        name: '',
        sn: '',
        managerId: '',
        parentId: '',
        dirPath: '',
        manager: ''
      },
      shopAuditLog: {
        note: '',
        shopId: ''
      }

    }
  },
  methods: {
    /*    getShopByKeyWord(){
          this.currentPage = 1;
          this.getShop();
        },*/

    //当页码发生改变的时候，触发事件
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getShops();
    },
    //获取用户列表
    getShops() {
      //开启加载框
      this.listLoading = true;
      var param = {
        "currentPage": this.currentPage,
        "pageSize": this.pageSize,
        "keyword": this.filters.keyword
      }
      this.$http.post("/shop", param).then(result => {
        console.log(result);
        var {success, resultObj} = result.data;
        console.log(success);
        if (success) {
          console.log(resultObj);
          this.shops = resultObj.list;
          this.total = resultObj.total;
        }
        this.listLoading = false;
      })
    },
    //删除
    handleDel: function (index, row) {
      this.$confirm('确认删除该记录吗?', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true;
        this.$http.delete("/shop/" + row.id).then(res => {
          var {success, resultObj} = res.data;
          //如果成功
          if (success) {
            //刷新界面
            this.getShops();
          } else {
            this.$message({
              message: '删除失败',
              type: 'error'
            });
          }
          this.listLoading = false;
        })
      }).catch(() => {

      });
    },
    //显示编辑界面
    handleEdit: function (index, row) {
      // //设置标题
      this.title = "修改";

      //回显数据
      this.addForm = Object.assign({}, row);

      //如果manager有值，就回显店铺经理
      if (this.addForm.manager) {
        this.addForm.managerId = this.addForm.manager.id;
      }
      if (this.addForm.parent) {
        //获取层级路径
        var dirPath = this.addForm.dirPath;
        //以/进行切割
        var dirPaths = dirPath.split("/");

        //上级层次用一个数组来装
        var parentIds = [];
        for (var i = 0; i < dirPaths.length - 1; i++) {
          if (dirPaths[i]) {
            parentIds.push(parseInt(dirPaths[i]));
          }
        }
        //给上级店铺赋值
        this.addForm.parentId = parentIds;

      }
      if (this.$refs["addForm"]) {
        // //清空校验
        this.$refs["addForm"].clearValidate();
      }
      //显示模态框
      this.addFormVisible = true;

    },
    //显示新增界面
    handleAdd: function () {
      //设置标题
      this.title = "新增";
      //显示模态框
      this.addFormVisible = true;
      //循环addForm对象，对内部的属性值，进行清空
      for (let key in this.addForm) {
        this.addForm[key] = "";
      }
      //清空校验
      this.$refs["addForm"].clearValidate();

    },
    //新增
    addSubmit: function () {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          let para = Object.assign({}, this.addForm);
          //如果没有选中父级，那就不提交该属性
          if (!para.parentId) {
            delete para["parentId"];
          }
          this.$http.put("/shop", para).then(res => {
            var {success, resultObj} = res.data;
            if (success) {
              //关闭窗口
              this.addFormVisible = false;
              //刷新界面
              this.getShops();
              //刷新店铺树
              /*              this.getTree();*/
            } else {
              this.$message({
                message: '提交失败',
                type: 'error'
              });
            }
          })
        }
      });
    },
    selsChange: function (sels) {
      this.sels = sels;
    },
    //批量删除
    batchRemove: function () {
      this.$confirm('确认删除选中记录吗？', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true;
        this.$http.patch("/shop", this.sels).then(res => {
          var {success, resultObj} = res.data;
          //如果成功
          if (success) {
            //刷新界面
            this.getShops();
          } else {
            this.$message({
              message: '删除失败',
              type: 'error'
            });
          }
          this.listLoading = false;
        })

      }).catch(() => {

      });
    },
    //点击店铺审核弹出模态框
    handleAudit: function (index, row) {
      this.shopAuditLog = {
        note: '',
        shopId: ''
      }
      this.shopAuditLog.shopId = row.id;
      this.shopAuditVisible = true;
    },
    //审核驳回
    auditReject() {
      this.$http.post("/shop/audit/reject", this.shopAuditLog).then(res => {
        if (res.data.success) {
          this.$message({
            message: '驳回成功',
            type: 'success'
          });
        } else {
          this.$message({
            message: '驳回失败',
            type: 'error'
          });
        }
        this.shopAuditVisible = false;
        this.getShops();
      })
    },
    //审核通过
    auditPass() {
      this.$http.post("/shop/audit/pass", this.shopAuditLog).then(result => {
        result = result.data;
        if (result.success) {
          this.$message({
            message: '审核通过',
            type: 'success'
          });
        } else {
          this.$message({
            message: '审核失败',
            type: 'error'
          });
        }
        this.shopAuditVisible = false;
        this.getShops();
      })
    },
  },
  mounted() {
    //店铺列表分页查询
    this.getShops();
  }
}

</script>

<style scoped>

</style>